<template>
  <div class="tags">
    <div class="tag-cloud">
      <div class="tag-cloud-title">目前共计 {{tags.length}} 个标签</div>
      <div class="tag-cloud-tags" :style="'min-height:'+minHeight">
        <li v-for="(tag,index) in tags" :key='index' @click="changeTag(tag.id)" :style='{"font-size": setFontSize(tag), "color": setColor(tag)}'>{{tag.name}}</li>
      </div>
    </div>
  </div>
</template>

<script>
import ArticleScrollPage from "@/components/ArticleScrollPage";
import { getTags } from "@/api/tag";
let _this;
export default {
  name: "Tags",
  components: {
    ArticleScrollPage
  },
  data() {
    return {
      tags: [],
      params: {
        query: {
          tag_id: 0
        }
      },
      minHeight: 0,
      minCount:0,
      maxCount:0
    };
  },
  mounted() {
    _this = this;
    _this.getTagsList();
    _this.minHeight = "350px";
  },
  methods: {
    setFontSize(tag){
      let minFontSize = 12
      let maxFontSize = 30
      let spread = _this.maxCount - _this.minCount;

      spread == 0 && spread == 1

      let size = minFontSize + ( tag.count - _this.minCount ) * ( maxFontSize - minFontSize ) / spread;
      return size.toFixed(2)+'px';
    },
    setColor(tag){
      let color = {
        r: 0 ,
        g: 0,
        b: 0
      }
      let min = _this,minCount;
      let max = _this.maxCount;
      let minHex = parseInt('33', 16);
      let maxHex = parseInt('99', 16);

      color = _this.getRGB(minHex, maxHex);
      return '#' + _this.toHex(color.r) + _this.toHex(color.g) + _this.toHex(color.b);
    },
    getRGB(min, max) {
      return {
        r: min + Math.round(Math.random() * 1000) % (max - min),
        g: min + Math.round(Math.random() * 1000) % (max - min),
        b: min + Math.round(Math.random() * 1000) % (max - min)
        }
    },
    toHex(val) {
      var hex = '00';
      if(val) {
        hex = parseInt(val).toString(16);
        if(hex.length == 1) {
          hex = '0' + hex;
        }
      }
      return hex;
    },
    getTagsList() {
      getTags().then(res => {
        _this.tags = res.data.list;
        _this.minCount = res.data.minCount;
        _this.maxCount = res.data.maxCount;
      });
    },

    changeTag(id) {
      //_this.$router.push({path: `/tags/${id}`})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='stylus' scoped>
.tags 
  width 65%
  text-align center
  line-height 2
  h2 
    line-height 100px
    color #555
    font-weight 500
  h5
    font-weight 500
    color: #555
  .tag-cloud 
    width 70%
    margin 10% auto
    li
      list-style none
      display inline-block
      margin 10px
      cursor pointer
</style>
